/* 

函数组件作用(类组件叫生命周期)：
  1. 挂载时
    useEffect(() => {  }, []);
  2. 更新时 - 可以监听某个状态的更新
    useEffect(() => {  }, [状态1, 状态2]);
  3. 卸载时
*/


import React, { useState } from 'react';
import { useEffect } from "react";

// 函数式组件
function App() {

  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('无');

  useEffect(() => {
    setTimeout(() => {
      console.log('数据获取成功');
    }, 1000);
  }, [count, msg]);

  // console.log('effect外面代码');

  return <div>
    <p>计数器：{count}</p>
    <p>消息：{msg}</p>
    <button onClick={() => setCount(count + 1)}>修改计数器</button>
    <button onClick={() => setMsg('你好')}>修改消息</button>
  </div>;
}

export default App;
